<template>
   <div class="wrapper">
        <div class="top-wrap">
            <p class="state">已完成</p>
            <p>订单已完成,感谢您再次光临</p>
        </div>
        <div class="content-wrap">
            <div class="age_wrap user-age-address">
                <div class="expressage">
                    <div class="pos">
                        <img src="/static/imgs_s04/03/s04_pic02.png" alt="">
                    </div>
                    <div class="user-address-name">
                        <div class="username">
                            <div class="user_age_tel">
                                <span class="client_name order-status">您的订单已签收</span>
                                <!-- <a class="client_tel" href="tel:15517187268">15517187268</a> -->
                            </div>
                            <span>&gt;</span>
                        </div>
                        <p class="add_ar">2018-06-08 09:12:26</p>
                    </div>
                </div>
                <div class="user_nameage">
                    <div class="pos">
                        <img src="/static/imgs_s04/03/s04_pic02.png" alt="">
                    </div>
                    <div class="user-address-name">
                        <div class="username">
                            <div class="user_age_tel">
                                <span class="client_name">小明</span>
                                <span class="client_tel">15517187268</span>
                            </div>
                            <!-- <span>修改&gt;</span> -->
                        </div>
                        <p class="add_ar">河南省郑州市金水区中州大道农业路苏荷中心</p>
                    </div>
                </div>
            </div>
            <div class="age_wrap goods-age-text">
                <div class="topbar">
                    <div class="logo-wrap">
                        <em class="logo-box"></em>
                        <h2>汇方圆</h2>
                    </div>
                </div>
                <div class="goods-age-box">
                    <div class="good-pic">
                        <img src="/static/imgs_s04/03/s04_rio.png" alt="">
                    </div>
                    <div class="text-age">
                        <p>RIO锐澳鸡尾酒微醺（六种口味）洋酒预调酒果酒混合装275ml*6瓶</p>
                        <p class="age-box-size">
                            <span>275ml*6瓶</span>
                            <span>x1</span>
                        </p>
                        <p class="pay_m">￥72.90</p>
                    </div>
                </div>
            </div>
            <div class="age_wrap order-age-money">
                <p>
                    <span>商品总额</span>
                    <span class="money-r">￥72.90</span>
                </p>
                <p>
                    <span>运费</span>
                    <span class="money-r">￥0</span>
                </p>
                <p class="need-money">
                    <span>需付款：</span>
                    <span class="money-r">￥72.90</span>
                </p>
            </div>
            <div class="age_wrap order-time-payment">
                <p class="order-ages">订单信息</p>
                <p>
                    <span class="ord-num">订单编号:</span>
                    <span>568979875668766</span>
                </p>
                <p>
                    <span class="ore-time">下单时间:</span>
                    <span>2018-06-08 18:22:06</span>
                </p>
                <p>
                    <span class="pay-ment">支付方式:</span>
                    <span>微信支付</span>
                </p>
                <p>
                    <span class="pay-time">支付时间:</span>
                    <span>2018-06-08 18:22:56</span>
                </p>
            </div>
        </div>
        <div class="footer-wrap">
            <div class="star-area">
                <span>
                    <img src="/static/imgs_s04/02/s04_collect.png" alt="">
                </span>
                <span>收藏订单</span>
            </div>
            <div class="btn-age-wrap">
                <span class="btn-bx">立即评价</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
     
      }
    
  },

  components: {
  },

  methods: {
  
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
page {
    font-size: 13px;
}
 .wrapper {
            width: 100%;
            height: 100%;
            background-color: #eee;
        }

        body,
        html {
            font-size: 13px;
        }

        em,
        i {
            font-style: normal;
            display: inline-block;
        }

        .top-wrap {
            width: 100%;
            height: 170px;
            padding-top: 36px;
            box-sizing: border-box;
            background-color: #32B16C;
        }

        .top-wrap p {
            color: #fff;
            margin-bottom: 15px;
            margin-left: 18px;
        }

        .top-wrap .state {
            font-size: 20px;
        }

        /* 主体内容区域 */
        .content-wrap {
            width: 100%;
            margin: 0 auto;
            position: relative;
            top: -34px;
            padding-bottom: 70px;
        }

        .content-wrap .age_wrap {
            width: 96%;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 9px;
            margin-bottom: 10px;
        }

        .user-age-address {
            display: flex;
            flex-direction: column;
            height: 120px;
            /* justify-content: space-between; */
        }

        .expressage .order-status {
            color: #32B16C;
        }

        .user-age-address>div {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .user-age-address .pos {
            width: 30px;
            height: 30px;
            padding: 12px 10px 19px 13px;
        }

        .user-age-address .pos img {
            width: 30px;
            height: 30px;
        }

        .user-address-name {
            display: flex;
            flex-direction: column;
            margin-left: 0px;
            flex: 1;
        }

        .user-address-name .username {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 3px 0px;
            padding-right: 15px;
        }

        .client_name {
            color: #000;
            /* font-weight: 600; */
            font-size: 13px;
        }

        .client_tel {
            color: #A3A5A8;
            font-size: 12px;
        }

        .user_age_tel+span {
            font-size: 12px;
            color: #666666;
        }

        .username+p {
            font-size: 12px;
            color: #333333;
        }

        .goods-age-text {
            height: 145px;
            display: flex;
            flex-direction: column;
            font-size: 11px;
        }

        .topbar .logo-wrap {
            height: 18px;
            margin-top: 10px;
            margin-left: 9px;
            display: flex;
        }

        .logo-wrap .logo-box {
            width: 18px;
            height: 18px;
            background-color: #eee;
            display: inline-block;
        }

        .logo-wrap h2 {
            margin-left: 6px;
            color: #303030;
            font-size: 12px;
        }

        .goods-age-box {
            display: flex;
            flex-direction: row;
            margin-top: 17px;
        }

        .good-pic {
            padding-right: 9px;
        }

        .good-pic,
        .good-pic img {
            width: 91px;
            height: 91px;
        }

        .goods-age-box .text-age p {
            margin-bottom: 15px;
        }

        .text-age {
            flex: 1;
            padding-right: 10px;
        }

        .age-box-size {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .pay_m {
            text-align: right;
            color: #333333;
            font-size: 13px;
        }

        .order-age-money {
            height: 121px;
        }

        .order-age-money p {
            height: 40px;
            line-height: 35px;
            font-size: 12px;
            color: #666666;
            padding: 0 10px;
        }

        .money-r {
            float: right;
        }

        .need-money span {
            /* font-weight: 600; */
            font-size: 13px;
            color: #000;
        }

        .need-money span.money-r {
            color: #F75458;
            font-size: 15px;
        }

        .content-wrap .order-time-payment {
            height: 147px;
            display: flex;
            flex-direction: column;

        }

        .order-time-payment p {
            font-size: 11px;
            color: #1D1E1E;
            height: 20px;
            padding: 0 10px;
            margin: 5px 0;
            font-family: "SourceHanSansCN-Normal";
        }

        .order-ages {
            font-size: 12px;
            color: #333333;
            /* font-weight: 600; */
            padding: 10px 10px;
        }

        .footer-wrap {
            width: 100%;
            height: 47px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background-color: #fff;
            position: fixed;
            bottom: 0px;
        }

        .star-area {
            display: flex;
            width: 40px;
            flex-direction: column;
            padding: 8px 9px 0px 10px;
            text-align: center;
            font-size: 9px;
        }

        .star-area img {
            width: 18px;
            height: 18px;
        }
        .btn-age-wrap {
            padding: 11px 10px 9px 0px;
        }
        .btn-age-wrap .btn-bx{
            display:inline-block; 
            padding: 5px 10px;
            background-color: #32B16C;
            color: #fff;
            font-size: 12px;
            border-radius: 14px;
        }
</style>
